<%--
  Created by IntelliJ IDEA.
  User: Kohler
  Date: 2022/11/19
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生登录</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
   <style type="text/css">
     body{
       background: url('../images/3.jpg')no-repeat ;
       background-size: 100% 130%;
     }
     #title{
       font-family:"新宋体";
       position: absolute;
       color: brown;
       font-size: 60px;
       text-align-last: center;
       left: 40%;
       top: 10%;
     }
    #content{
      position: absolute;
      top: 50%;/*顶部到元素*/
      left:30%;
      width: 40%;
      height:400px;
      margin-top:-200;/*边缘到底部*/
      background-color: #34495e;
      text-align-last: center;
      /*这里做一个半透明效果*/
      filter:alpha(Opacity=60);
      -moz-opacity:0.8;
      opacity: 0.8;
    }
    #userid{
      color: #3498db;
      font-size: 30px;
      text-align: center;
      border-radius: 25px;/*边框圆角*/
    }
    #password{
      color: #3498db;
      font-size: 30px;
      text-align: center;
      border-radius: 25px;
    }
    #ucode{
      color: #3498db;
      font-size: 30px;
      text-align: center;
      border-radius: 25px;
    }
    #denglu{
      background-color: pink;
      border-radius:10px;
      border:0;/*边框宽度0*/
      height:50px;
      width:90px;
      padding:5px 10px;/*上下填充10 左右5*/
      font-size: 20px;
    }
    #zhuce{
      background-color: pink;
      border-radius:10px;
      border:0;/*边框宽度0*/
      height:50px;
      width:90px;
      padding:5px 10px;/*上下填充10 左右5*/
      font-size: 20px;
    }
    #content h1{
      color: white;
      font-size: 50px;
    }
  </style>
  <script type="text/javascript">
      function reloadCode() {
          document.getElementById("codeimg").src="<%= request.getContextPath()%>/imageGenerate?time" + new Date().getTime();
      }
    $(function(){<!-- -->
      $("input[name='Usercode']").change(function(){<!-- -->
        let Usercode = $("input[name='Usercode']").val();
        $.post("<%= request.getContextPath()%>/CodeAjax",{<!-- -->
          Usercode : Usercode,
        },function(res){<!-- -->
          if(res=="yes"){<!-- -->
            $("#flagcode").empty();
            $("#flagcode").append("验证码正确！");
          }
          else{<!-- -->
            $("#flagcode").empty();
            $("#flagcode").append("验证码错误！");
          }
        })
      })
    })
  </script>
</head>
<body>
<div id="content">
  <h1 >学生登录</h1><br />
  <form action="<%= request.getContextPath()%>/studentLogin"method="post" >
      <font size="4">&nbsp;&nbsp;学号&nbsp;</font>&nbsp;<input type="text" name="userid" id="userid" placeholder="请输入学号" /><br />
      <font size="4">&nbsp;&nbsp;密码&nbsp;</font>&nbsp;<input type="password" name="password" id="password" placeholder="请输入密码" /><br />
      <font size="4">&nbsp;&nbsp;验证码&nbsp;</font>&nbsp;<input type="text" name="Usercode" id="ucode" placeholder="验证码" required="required"><font color="white"><div id="flagcode"></div></font>
    <img id="codeimg" alt="Code" src="<%= request.getContextPath()%>/imageGenerate"  width="150" height="50">
    <a href="javascript:reloadCode();" >
    <font color="#faebd7" >看不清楚</font>
    </a>
<br/>
    <input type="submit" name="denglu" id="denglu" value="登录" />&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <a href="../studentRegister.jsp" target="_blank"><input type="button" name="zhuce" id="zhuce" value="注册"/></a>
  </form></div>
</body>
</html>
